<script>
	import * as THREE from 'three';
	import * as SC from 'svelte-cubed';
	import { tweened } from 'svelte/motion';
	import { elasticOut } from 'svelte/easing';

	let scaleType = 'MEDIUM';
	let scale = tweened(1, { duration: 2000, easing: elasticOut });

	// reactive statement to update scale based on scaleType
	$: if (scaleType === 'SMALL') {
		$scale = 0.25;
	} else if (scaleType === 'MEDIUM') {
		$scale = 1;
	} else if (scaleType === 'LARGE') {
		$scale = 1.75;
	}

	let rotate = 0;
	SC.onFrame(() => {
		rotate += 0.01;
	});
</script>

<SC.Canvas background={new THREE.Color('seagreen')}>
	<SC.AmbientLight color={new THREE.Color('white')} intensity={0.5} />
	<SC.DirectionalLight color={new THREE.Color('white')} intensity={0.75} position={[10, 10, 10]} />

	<!-- MESHES -->
	<SC.Mesh
		geometry={new THREE.OctahedronGeometry()}
		material={new THREE.MeshStandardMaterial({
			color: new THREE.Color('salmon')
		})}
		rotation={[rotate, rotate, rotate]}
		scale={[$scale, $scale, $scale]}
	/>

	<!-- CAMERA -->
	<SC.PerspectiveCamera near={1} far={100} fov={55} />
	<SC.OrbitControls />

	<!-- all of our scene stuff will go here! -->
</SC.Canvas>

<div class="controls">
	<label>
		SMALL
		<input type="radio" bind:group={scaleType} value="SMALL" />
	</label>
	<label>
		MEDIUM
		<input type="radio" bind:group={scaleType} value="MEDIUM" />
	</label>
	<label>
		LARGE
		<input type="radio" bind:group={scaleType} value="LARGE" />
	</label>
</div>

<style>
	.controls {
		position: absolute;
		top: 0.5rem;
		left: 0.5rem;
		background: #00000088;
		padding: 0.5rem;
		color: white;
	}
</style>
